<template>
    <div class="detectionBox" ref="detectionBox" @click="handleClick">
    <button>按钮1</button>
    <button>按钮2</button>
    <div class="otherElement">其他元素</div>
  </div>
    <div class="recordBox">
        <div v-for="(point, index) in points" :key="index" class="dot" :style="{ top: point.y + '%', left: point.x + '%' }">
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const points = ref([])
const detectionBox = ref(null);
const handleClick = () => {
  const detection = detectionBox.value;
  const rect = detection.getBoundingClientRect();
  const clickX = event.clientX - rect.left; // 计算相对于 detectionBox 的点击位置
  const clickY = event.clientY - rect.top; // 计算相对于 detectionBox 的点击位置
  const percentX = (clickX / detection.clientWidth) * 100;
  const percentY = (clickY / detection.clientHeight) * 100;
  points.value.push({ x: percentX, y: percentY });
};
</script>

<style scoped>
.detectionBox {
    height: 300px;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    border-radius: 5px;
}

.recordBox {
    height: 300px;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    position: relative;
}

.dot {
    position: absolute;
    width: 30px;
    height: 30px;
    background: radial-gradient(rgba(255, 72, 0, 0.1), rgba(255, 255, 255, 0));
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
</style>